<template>
<div class="main">
 <div class="top"></div>
 <div class="content">
   <div class="c-left1"></div>
   <div class="c-left2">
     <div class="c-left21">职业技能培训证书</div>
     <div class="c-left22">姓名：<span>廖景南&nbsp</span>   性别：<span>男</span></div>
     <div class="c-left23">出生日期：<span>19XX年0X月XX日</span></div>
     <div class="c-left24">证书编号：<span>2125000004522</span> </div>
     <div class="c-left25">身份证号：<span>4501XXXXXXXXXX159X</span> </div>
     <div class="c-left26">证书查询： https://www.nnguoao.com/zscx.html</div>
   </div>
   <div class="c-left3">
     <div class="c-left31">
       <img src="../assets/icons/ljn.png">
     </div>
     <div class="c-left32">考核项目：<span>电商直播&nbsp&nbsp</span></div>
     <div class="c-left33">考核成绩：<span>82分&nbsp&nbsp&nbsp&nbsp</span> </div>
     <div class="c-left34">评定成绩：<span>优秀&nbsp&nbsp&nbsp&nbsp</span> </div>
     <div class="c-left35">南宁市国奥职业培训学校</div>
     <div class="c-left36">2021年05月03日</div>
   </div>
   <div class="c-right"></div>

 </div>
 <div class="foote"></div>
</div>
</template>

<script>
//window.print();
</script>
<style scoped>
.main{
position: relative;
float: left;
width: 911px;
height: 649px;
background: linear-gradient(135deg, transparent, transparent 45%, #e0e7ee, transparent 55%, transparent 100%);
background-size: 5px 5px;
}
.top{
  width: 911px;
  height: 31px;
  background-image: url("../assets/icons/top.png");
}
.content{
  display: flex;
  width: 911px;
  height: 587px;
}
.foote{
  width: 911px;
  height: 31px;
  background-image: url("../assets/icons/bottom.png");
}
.c-left1{
  width: 31px;
  height: 587px;
  background-image: url("../assets/icons/left.png");
}
.c-left2{
  width: 424.5px;
  height: 587px;
}
.c-left21{
  width: 424.5px;
  height: 200px;
  font: 40px "雅黑";
   display: flex;
  justify-content: center;
  align-items: center;
}
.c-left22{
  width: 424.5px;
  height: 57px;
  font: 25px "宋体";
  display: flex;
  justify-content: left;
  padding-left: 50px;
}
.c-left23{
  width: 424.5px;
  height: 57px;
  font: 25px "宋体";
   display: flex;
  justify-content: left;
  padding-left: 50px;
}
.c-left24{
  width: 424.5px;
  height: 57px;
  font: 25px "宋体";
   display: flex;
  justify-content: left;
  padding-left: 50px;
 
}
.c-left25{
  width: 424.5px;
  height: 57px;
  font: 25px "宋体";
   display: flex;
  justify-content: left;
  padding-left: 50px;

}
.c-left26{
  width: 424.5px;
  height: 66px;
  font: 15px "宋体";
  padding-top: 40px;
   display: flex;
  justify-content: left;
  padding-left: 50px;
}
.c-left3{
  width: 424.5px;
  height: 572px;
}
.c-left31{
  width: 424.5px;
  height: 207px;
   display: flex;
  justify-content: center;
  align-items: center;
}
.c-left31 img{
  width: 92px;
  height: 127px;
}
.c-left32{
  width: 424.5px;
  height: 53px;
  font: 25px "宋体";
  
}
.c-left33{
  width: 424.5px;
  height: 53px;
  font: 25px "宋体";
}

.c-left34{
  width: 424.5px;
  height: 53px;
  font: 25px "宋体";
}

.c-left35{
  width: 424.5px;
  height: 75px;
  font: 25px "宋体";
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-image: url(../assets/icons/ljn.png); */
}
.c-left36{
  width: 424.5px;
  height: 65px;
  font: 25px "宋体";
}
.c-right{
  width: 31px;
  height: 587px;
  background-image: url("../assets/icons/right.png");
}
span{
  text-decoration:underline
}
</style >